import 'package:flutter/material.dart';

class ListDemo extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
		
		return new Scaffold(
			appBar: AppBar(
				title: Text("List Demo"),
			),
			body: Column(
				children: <Widget>[
					_horizontalList(),

					Row(
						children: <Widget>[
							_verticalList(),
							_gridView(context),
						],
					),


					_swipToDismissList(),

				],
			),
		);

	}

	Widget _horizontalList() {
		return Container(
			child: ListView(
				// This next line does the trick.
				scrollDirection: Axis.horizontal,
				children: <Widget>[
					new Container(
						width: 160.0,
						color: Colors.red,
					),
					new Container(
						width: 160.0,
						color: Colors.blue,
					),
					new Container(
						width: 160.0,
						color: Colors.green,
					),
					new Container(
						width: 160.0,
						color: Colors.yellow,
					),
					new Container(
						width: 160.0,
						color: Colors.orange,
					),
				],
			),
			height: 60,
		);
	}

	Widget _verticalList() {
		return Container(
			child: ListView(
				// This next line does the trick.
				scrollDirection: Axis.vertical,
				children: <Widget>[
					new Container(
						height: 40.0,
						color: Colors.red,
					),
					new Container(
						height: 40.0,
						color: Colors.blue,
					),
					new Container(
						height: 40.0,
						color: Colors.green,
					),
					new Container(
						height: 40.0,
						color: Colors.yellow,
					),
					new Container(
						height: 40.0,
						color: Colors.orange,
					),
				],
			),
			height: 150,
			width: 150,
//			padding: EdgeInsets.all(10),
			margin: EdgeInsets.all(10),
		);
	}

	var mixedListDatas = <String>[];

	Widget _mixedList() {
		return Container(
			child: ListView(
				// This next line does the trick.
				scrollDirection: Axis.vertical,

			),
			height: 200,
//			padding: EdgeInsets.all(10),
			margin: EdgeInsets.all(10),
		);
	}


	Widget _gridView(BuildContext context) {
		return Container(
			child: GridView.count(
				// Create a grid with 2 columns. If you change the scrollDirection to
				// horizontal, this would produce 2 rows.
				crossAxisCount: 2,

				mainAxisSpacing: 5,

				crossAxisSpacing: 10,
				
				padding: EdgeInsets.fromLTRB(10, 10, 10, 10),

				// Generate 100 Widgets that display their index in the List
				children: new List.generate(100, (index) {
					return _gridItem(context, index);
				}),
			),
			height: 150,
			width: 150,
			color: Colors.tealAccent,
		);
	}

	Widget _gridItem(BuildContext context, index) {
		TextStyle style = TextStyle(
			backgroundColor: Colors.red,
			fontSize: 18,
		);
		return new Container(
//			color: Colors.deepPurple,

			decoration: new BoxDecoration(
				color: Theme.of(context).buttonColor,
				borderRadius: new BorderRadius.circular(8.0),
				border: Border.all(
					color: Colors.black,
					width: 1,
				)
			),

			margin: EdgeInsets.all(0),
			padding: EdgeInsets.all(10),

			child: Text(
				'Item $index',
				style: style,
			),

			height: 60,
			width: 60,
		);
	}

	Widget _swipToDismissList() {
		final items = new List<String>.generate(20, (i) => "Item ${i + 1}");
		return Container(
			child: new ListView.builder(
				itemCount: items.length,
				itemBuilder: (context, index) {
					final item = items[index];

					return new Dismissible(
						// Each Dismissible must contain a Key. Keys allow Flutter to
						// uniquely identify Widgets.
						key: new Key(item),
						// We also need to provide a function that will tell our app
						// what to do after an item has been swiped away.
						onDismissed: (direction) {
							items.removeAt(index);

							Scaffold.of(context).showSnackBar(
								new SnackBar(content: new Text("$item dismissed")));
						},
						// Show a red background as the item is swiped away
						background: new Container(color: Colors.red),
						child: new ListTile(title: new Text('$item')),
					);
				},
			),
			width: 200,
			height: 200,

			decoration: new BoxDecoration(
				color: Colors.black12,
				borderRadius: new BorderRadius.circular(8.0),
				border: Border.all(
					color: Colors.black,
					width: 1,
				)
			),
		);
	}
}

